<li
  #dragElement
  role="treeitem"
  [style.display]="displayStyle"
  [ngClass]="nzNodeClass">
  <ng-container *ngIf="nzShowExpand">
    <span
      [ngClass]="nzNodeSwitcherClass"
      (click)="_clickExpand($event)">
      <ng-container *ngIf="isShowSwitchIcon">
        <ng-container *ngIf="!nzTreeNode.isLoading">
          <ng-template
            *ngIf="isTemplateRef(nzExpandedIcon)"
            [ngTemplateOutlet]="nzExpandedIcon"
            [ngTemplateOutletContext]="{ $implicit: nzTreeNode }">
          </ng-template>
          <i
            *ngIf="!isTemplateRef(nzExpandedIcon)"
            nz-icon
            nzType="caret-down"
            [class.ant-select-switcher-icon]="nzSelectMode"
            [class.ant-tree-switcher-icon]="!nzSelectMode">
          </i>
        </ng-container>
        <i *ngIf="nzTreeNode.isLoading" nz-icon nzType="loading" [nzSpin]="true" class="ant-tree-switcher-loading-icon"></i>
      </ng-container>
      <ng-container *ngIf="nzShowLine">
        <ng-template
          *ngIf="isTemplateRef(nzExpandedIcon)"
          [ngTemplateOutlet]="nzExpandedIcon"
          [ngTemplateOutletContext]="{ $implicit: nzTreeNode }">
        </ng-template>
        <ng-container *ngIf="!isTemplateRef(nzExpandedIcon)">
          <i *ngIf="isShowLineIcon" nz-icon [nzType]="isSwitcherOpen ? 'minus-square' : 'plus-square'" class="ant-tree-switcher-line-icon"></i>
          <i *ngIf="!isShowLineIcon" nz-icon nzType="file" class="ant-tree-switcher-line-icon"></i>
        </ng-container>
      </ng-container>
    </span>
  </ng-container>
  <ng-container *ngIf="nzCheckable">
    <span
      [ngClass]="nzNodeCheckboxClass"
      (click)="_clickCheckBox($event)">
      <span [class.ant-tree-checkbox-inner]="!nzSelectMode"
            [class.ant-select-tree-checkbox-inner]="nzSelectMode"></span>
    </span>
  </ng-container>
  <ng-container *ngIf="!nzTreeTemplate">
    <span
      title="{{nzTreeNode.title}}"
      [attr.draggable]="canDraggable"
      [attr.aria-grabbed]="canDraggable"
      [ngClass]="nzNodeContentClass"
      [class.draggable]="canDraggable">
      <span
        *ngIf="nzTreeNode.icon && nzShowIcon"
        [class.ant-tree-icon__open]="isSwitcherOpen"
        [class.ant-tree-icon__close]="isSwitcherClose"
        [class.ant-tree-icon_loading]="nzTreeNode.isLoading"
        [ngClass]="nzNodeContentLoadingClass">
        <span
          [ngClass]="nzNodeContentIconClass">
          <i nz-icon *ngIf="nzIcon" [nzType]="nzIcon"></i>
        </span>
      </span>
      <span class="ant-tree-title">
        <ng-container *ngIf="nzTreeNode.isMatched">
          <span>
            {{highlightKeys[0]}}<span class="font-highlight">{{nzSearchValue}}</span>{{highlightKeys[1]}}
          </span>
        </ng-container>
        <ng-container *ngIf="!nzTreeNode.isMatched">
          {{nzTreeNode.title}}
        </ng-container>
      </span>
    </span>
  </ng-container>
  <ng-template
    [ngTemplateOutlet]="nzTreeTemplate"
    [ngTemplateOutletContext]="{ $implicit: nzTreeNode }">
  </ng-template>

  <ul
    role="group"
    class="ant-tree-child-tree"
    [class.ant-tree-child-tree-open]="!nzSelectMode || nzTreeNode.isExpanded"
    data-expanded="true"
    [@.disabled]="noAnimation?.nzNoAnimation"
    [@collapseMotion]="nzTreeNode.isExpanded ? 'expanded' : 'collapsed'">
    <nz-tree-node
      *ngFor="let node of nzTreeNode.getChildren()"
      [nzTreeNode]="node"
      [nzShowExpand]="nzShowExpand"
      [nzNoAnimation]="noAnimation?.nzNoAnimation"
      [nzSelectMode]="nzSelectMode"
      [nzShowLine]="nzShowLine"
      [nzExpandedIcon]="nzExpandedIcon"
      [nzDraggable]="nzDraggable"
      [nzCheckable]="nzCheckable"
      [nzAsyncData]="nzAsyncData"
      [nzExpandAll]="nzExpandAll"
      [nzShowIcon]="nzShowIcon"
      [nzSearchValue]="nzSearchValue"
      [nzHideUnMatched]="nzHideUnMatched"
      [nzBeforeDrop]="nzBeforeDrop"
      [nzTreeTemplate]="nzTreeTemplate">
    </nz-tree-node>
  </ul>
</li>
